<script setup>
import {useRouter} from "vue-router";
import {ref} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {Crop, EditPen, SwitchButton, User,CaretBottom,Search,Memo,Switch} from "@element-plus/icons-vue";
const router = useRouter();
const userName = localStorage.getItem('userName');


const handleCommand = (command)=>{
  if (command === 'logout'){
    ElMessageBox.confirm(
        '您确定要退出吗？',
        '温馨提示',
        {
          confirmButtonText:'确认',
          cancelButtonText:'取消',
          type:'warning',
        }
    )
        .then(async ()=>{
          router.push('/login')
          ElMessage({
            type:'success',
            message:'退出登录成功',
          })

        })
        .catch(()=>{
          ElMessage({
            type:'info',
            message:'取消成功',
          })
        })
  }else {
    router.push(command)
  }
}
//展示抽屉
const drawer = ref(false);

function chatAI(){
  router.push('/chat')
}

</script>

<template>
  <div class="top-search">
    <img src="../../assets/logo.png" @click="" alt="">
    <el-input  placeholder="请输入关键字" :suffix-icon="Search" @keyup.enter=""  class="search"/>
  </div>
  <el-button class="announcement" @click="drawer = true">
    公告
  </el-button>
  <el-drawer v-model="drawer" title="I am the title" :with-header="false">
    <div class="announcement2">

      <div class="message" style="margin-bottom: 20px">
        <span>我的消息</span>
      </div>
      <hr>
      <div>
        <div class="new">
          <span class="newBook">新书推荐</span> <br>
        </div>

        <span class="time">2024-05-10 20:39:14</span> <br><br>
        <span style="opacity: 0.8">《倚天屠龙记》是中国作家金庸创作的长篇武侠小说，其丰富的故事情节和深刻的人物塑造使其成为中国文学史上的经典之作。这部小说首次于1961年连载，随后多次影视化和改编，广受读者喜爱。
在这部小说中，金庸以丰富的想象力和独特的笔触描绘了明代末年的江湖世界。主人公张无忌作为一位传世武功“九阳真经”的继承者，身陷纷争之中，但他内心正直善良，不断追求着真理与正义。与此同时，他的爱情纠葛、师徒情谊以及与武林各大门派的恩怨交织在一起，构成了一个扣人心弦的故事。
《倚天屠龙记》以其扣人心弦的情节、丰富多彩的人物形象以及对人性、道德和江湖规则的深刻探讨而广受赞誉。它不仅是一部武侠小说，更是一部关于友情、爱情和人生意义的伟大作品。
      </span> <br>
      </div>
      <br>
      <hr>
      <div>
        <div class="new">
          <span class="newBook">新书推荐</span> <br>
        </div>

        <span class="time">2024-05-09 12:05:28</span> <br><br>
        <span style="opacity: 0.8">《侠客行》是中国作家金庸创作的一部长篇武侠小说，被视为中国文学史上的经典之作。这部小说于1955年首次连载，后来也被多次改编成影视作品，深受观众喜爱。
在《侠客行》中，金庸再次展现了他丰富的想象力和独特的笔法，将读者带入一个充满江湖豪情的世界。主人公郭靖是一位正直勇敢的青年，他身世复杂，但心怀仁义，不畏艰险，一直追求着拯救苍生的正义之道。在他的成长历程中，他结识了众多江湖豪杰，与他们一同经历了种种挑战与冒险。
《侠客行》不仅以其扣人心弦的情节和精彩的武打场面吸引读者，更因其深刻的人物形象和对侠义精神的探讨而备受赞誉。小说中展现的友情、忠诚、荣誉感和责任感等主题，引发了读者对人性、道德和江湖规则的深刻思考，使其成为一部不可多得的文学佳作。
        </span> <br>
      </div>
      <br>
      <hr>
      <div>
        <div class="new">
          <span class="newBook">新书推荐</span> <br>
        </div>

        <span class="time">2024-05-06 23:40:57</span> <br><br>
        <span style="opacity: 0.8">《史记》是中国古代史书中的一部重要作品，由司马迁（前145年-前86年）撰写而成，被誉为中国历史上第一部纪传体通史。这部史书完成于公元前91年，是中国历史上最早的一部纪传体通史，对中国古代历史的记载和研究具有极高的价值。
在《史记》中，司马迁以独特的叙述方式，全面地记录了中国自传说时代至秦朝建立的历史，共分为十二本，包括了纪、表、书、世家、列传等不同的篇章。其中，《本纪》部分以年代为序，记述了历代君王的事迹，而《世家》和《列传》则着重于人物的传记和评价，塑造了众多历史人物的形象。
《史记》不仅在历史记载的丰富性和系统性方面具有重要意义，更在史学理论和方法上开创了新的局面。
        </span> <br>
      </div>
      <br>
      <hr>
      <div>
        <div class="new">
          <span class="newBook">新书推荐</span> <br>
        </div>

        <span class="time">2024-05-01 8:09:39</span> <br><br>
        <span style="opacity: 0.8">《边城浪子》是中国作家古龙创作的一部长篇武侠小说，也是他的代表作之一。这部小说首次于20世纪60年代连载，后来被改编为电影、电视剧等多种形式，深受广大读者和观众的喜爱。
在《边城浪子》中，古龙通过生动的笔触和丰富的想象力，描绘了一个充满江湖恩怨和武林风云的世界。主人公边城浪子东方不败，是一位身手敏捷、机智过人的江湖侠客。他身世神秘，行事独特，常常置身于各种纷扰之中。在江湖中，他与各路英雄豪杰展开了一系列惊心动魄的斗争，同时也经历了许多爱恨情仇。
《边城浪子》以其扣人心弦的情节、丰富多彩的人物形象和对江湖风情的生动描绘而备受赞誉。在小说中，古龙不仅展现了武侠世界的荣辱起伏，更深刻地探讨了人性、友情、爱情等主题，使其成为一部不可忽视的经典之作，为读者带来了深刻的思考和感动。
        </span> <br>
      </div>

    </div>
  </el-drawer>
  <el-popover
      placement="bottom-start" :width="200" trigger="hover" content="不知道看什么书，来问问智能AI吧">
    <template #reference>
      <el-button style="margin-right: 30px" @click="chatAI" >智能推荐</el-button>
    </template>

  </el-popover>
  你好！{{userName}}
  <el-dropdown placement="bottom-end" @command="handleCommand">
                    <span class="el-dropdown__box">
                        <el-avatar :src="Avatar" />
                        <el-icon class="el-icon">
                            <CaretBottom />
                        </el-icon>
                    </span>
    <template #dropdown>
      <el-dropdown-menu>
        <el-dropdown-item command="/book/record" :icon="Memo">借阅记录</el-dropdown-item>
        <el-dropdown-item command="/book/loan" :icon="Switch">互借图书</el-dropdown-item>
        <el-dropdown-item command="/user/info" :icon="User">基本资料</el-dropdown-item>
        <el-dropdown-item command="/user/avatar" :icon="Crop">更换头像</el-dropdown-item>
        <el-dropdown-item command="/user/resetPassword" :icon="EditPen">重置密码</el-dropdown-item>
        <el-dropdown-item command="logout" :icon="SwitchButton">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<style scoped>
.message {
  font-size: 20px;
}
.newBook{
  color: steelblue;
  margin-top: 5px;
}
.announcement2 {
  margin-left: 10px;
}
.time{
  font-size: 14px;
  opacity: 0.5;
}
.new {
  margin-top: 20px;
  margin-bottom: 5px;
}

.el-dropdown__box {
  display: flex;
  align-items: center;

  .el-icon {
    color: #999;
    margin-left: 10px;
  }

  &:active,
  &:focus {
    outline: none;
  }
}
.top-search{
  display: flex;
  width: 100%;
}
.search{
  width: 400px;
  margin: auto;
}
img{
  height: 40px;
  cursor:pointer;
  display: block;
}
.announcement {
  margin-right: 15px;
}
</style>